<template>
    <div>
        <el-select v-model="props.visitId" :clearable="clearable" :disabled="disabled" placeholder="请选择" style="width: 100%;"
                   @change="bedChange">
            <template #header>
                <div style="display: flex;">
                    <div class="font-css" style="flex: 2;min-width: 190px;">病区</div>
                    <div class="font-css" style="flex: 1;min-width: 100px; color: #057aff">床位号</div>
                    <div class="font-css" style="flex: 1;min-width: 140px; color: #057aff">房间号</div>
                    <div class="mr40 font-css" style="flex: 1;min-width: 120px;">患者姓名</div>
                    <div class="font-css" style="flex: 1;min-width: 120px;">住院号</div>
                </div>

            </template>
            <el-option v-for="item in bedList" :key="item.visitId" :label="item.name" :value="item.visitId">
                <div style="display: flex;">
                    <div class="font-css" style="flex: 2;">{{ item.wardCodeName }}</div>
                    <div class="font-css" style="flex: 1;margin-left: -20px;color: #057aff">{{ item.bedNo }}</div>
                    <div class="font-css" style="flex: 1;margin-left: -20px;color: #057aff">{{ item.roomNo }}</div>
                    <div class="mr40 font-css" style="flex: 1;margin-left: 20px;">{{ item.name }}</div>
                    <div class="font-css " style="flex: 1;">
                        {{ item.hospitalNo }}
                    </div>
                </div>
            </el-option>
        </el-select>
    </div>
</template>

<script lang="ts" setup>
import {listBedRecPatient} from "@/api/nurse/bedRec.ts"
import {useDictStoreHook} from "@/store/modules/dict.ts";

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('sys_normal_disable'))
const emits = defineEmits(['bedChange'])
const bedList = ref<any>([])
const props = defineProps({
    // 机构id
    orgId: {
        type: String,
        default: ''
    },
    // 患者住院id
    visitId: {
        type: String,
        default: ''
    },
    // 病区id
    wardCode: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    // 默认可以清空
    clearable: {
        type: Boolean,
        default: true
    },
    // 是否空床（Y占用、N未占用）
    bedBlank: {
        type: String,
        default: "N"
    }
})

watch(() => props.wardCode, (_newValue, _oldValue) => {
    getListBedRec()
}, {deep: true, immediate: true})

// watch(() => props.visitId, (_newValue, _oldValue) => {
//     getListBedRec()
// }, {deep: true, immediate: true})

function getListBedRec() {
    const param = {
        wardCode: props.wardCode,
        orgId: props.orgId,
        bedBlank: "Y",
    }
    listBedRecPatient(param).then((res: resType) => {
        bedList.value = res.data
    })
}

/**
 * 病床点击事件
 */
function bedChange(value: String) {
    let bedInfo = {}
    let index = bedList.value.findIndex(item => {
        return item.visitId === value
    })
    if (index > -1) {
        bedInfo = bedList.value[index]
    }
    emits("bedChange", bedInfo)
}
</script>


<style scoped>
.font-css {
    font-weight: bold;
    color: #000000;
}
</style>
